<template>
  <div>
    <!-- 查询 -->
    <div id="queryForm">
      <el-form :inline="true" :model="store">
        <!-- <el-form-item label="商铺名称">
          <el-col :span="15">
            <el-input size="mini" v-model="store.name" placeholder="商铺名称"></el-input>
          </el-col>
        </el-form-item> -->
        <el-form-item label="商铺类型">
          <el-col :span="15">
            <el-input size="mini" v-model="store.storeType" placeholder="商铺名称"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="querySearch" size="mini">查询</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="resetForm" size="mini">清空</el-button>
          <!-- <el-button type="primary" size="mini">
            <router-link :to="'store/save'">
              <i class="el-icon-plus el-icon--right">&nbsp;增加</i>
            </router-link>
          </el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table :data="storeList" style="width: 100%" align="center">
      <!-- 店铺名称 -->
      <el-table-column align="center" label="店铺名称" width="200">
        <template slot-scope="scope">
          <i class="el-icon-user-solid"></i>
          <span style="margin-left: 10px">{{ scope.row.departName }}</span>
        </template>
      </el-table-column>
      <!-- 店铺类型 -->
      <el-table-column align="center" label="店铺类型" width="200">
        <template slot-scope="scope">
          <i class="el-icon-alarm-clock"></i>
          <span style="margin-left: 10px">{{ scope.row.storeType }}</span>
        </template>
      </el-table-column>
      <!-- 位置 -->
      <el-table-column align="center" label="商铺号" width="200">
        <template slot-scope="scope">
          <i class="el-icon-s-goods"></i>
          <span style="margin-left: 10px">{{ scope.row.roomId }}</span>
        </template>
      </el-table-column>

      <!-- 许可证 -->
      <el-table-column label="许可证" width="180" align="center">
        <template slot-scope="scope">
          <!-- <i class="el-icon-office-building"></i> -->
          <span style="margin-left: 10px"><img :src="scope.row.storePromission" width="160px" height="100px"
              style="border-radius:10px;" alt=""></span>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="current" :page-sizes="[5, 10, 15, 20, 30, 50, 100]" :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>
</template>
<script lang="js">
export default {
  data () {
    return {
      store: {}, // 查询条件
      storeList: [{
        departName: '掌机面馆',
        // 商铺位置
        roomId: 23,
        // 商铺类型
        storeType: '14344343434',
        rent: '10000',
        // 许可证
        storePromission: 'https://p0.meituan.net/iphoenix/0f7e11289ebddb4bfd6cdb8b48de99623195814.jpg@740w_416h_1e_1c',
      },
      {
        departName: '理想大虾',
        // 商铺位置
        roomId: 6,
        // 商铺类型
        storeType: '14344343434',
        rent: '40440',
        // 许可证
        storePromission: 'https://p1.meituan.net/msmerchant/c43ab8b7ef20a0ad29f06f373bb5673331926.jpg@321w_180h_1e_1c',
      },
      {
        departName: '串串香',
        // 商铺位置
        roomId: 9,
        // 商铺类型
        storeType: '14344343434',
        rent: '10500',
        // 许可证
        storePromission: 'https://p0.meituan.net/biztone/533813409_1646798813236.jpeg@321w_180h_1e_1c',
      },

      ], // 数据表格中的数据
      current: 1, // 当前页
      limit: 10, // 每页显示的记录数
      total: 50, // 符合条件的总记录数，
    }
  },
  created () {
    this.findPage(this.current, this.limit)
    console.log('商铺组件被调用')
  },

  methods: {
    // 清空查询表单
    resetForm () {
      this.store = {}
      this.findPage(this.current, this.limit)
    },
    // 查询
    querySearch () {
      console.log(this.store)
      this.findPage(this.current, this.limit)
    },
    // 当前页显示的记录数改变
    handleSizeChange (val) {
      console.log(val)
      this.findPage(this.current, val)
    },
    // 当前页发生变化
    handleCurrentChange (val) {
      console.log(val, this.limit)
      this.findPage(val, this.limit)
    },
    storeEdit (index, row) {
      console.log(index, row)
    },
    // 点击了删除
    storeDelete (id, row) {
      this.$confirm("此操作会永久删除此员工信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //点击确实确认按钮
          this.$http({
            method: "delete",
            url: `store/deleteStore/${id}`,
          }).then((res) => {

            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              })
              this.findPage(this.current, this.limit)
            } else {
              this.$message({
                type: "info",
                message: "已取消删除",
              })
            }
          })
        })
    },
    // 商铺分页查询
    findPage (current = 1, limit = 10) {
      this.$http({
        method: "post",
        url: `/store/findPage/${current}/${limit}`,
        data: this.store,
      }).then((res) => {
        console.log('当前是store表,查询到的数据', res)
        let data = res.data.data
        this.storeList = data.rows.map(item => {
          // 对数据包进行管理，解构，返回的格式需再次控制
          let info = { ...item.departmentTable, ...item.storeTable }

          info['storePromission'] = item.storeTable.storePromission ?? require('../../../../assets/img/shouquan.png')

          info['storeRent'] = item.storeTable.storeRent ?? '1000'
          return info
        })
        this.total = data.total
        this.current = data.pages
        // this.limit = res.data.data.limit
      })

    }
  },
}
</script>
<style scoped>

</style>
